<template>
  <view class="firm-preview tabs" id="firmPreview">
    <scroll-view
      class="tabs-nav-scroll"
      scroll-x
      :scroll-into-view="scrollIntoView"
      :enable-flex="true"
      scroll-with-animation
      scroll-anchoring
      :enhanced="true"
      :show-scrollbar="false"
    >
      <view class="tabs-nav">
        <template v-for="(v, i) in list" :key="`tabsNav${i}`">
          <view
            class="tabs-nav_item"
            :id="`tabsNavItem_${i}`"
            :class="[currentTab === i && 'tabs-nav_item--active']"
            @click="switchTab(i)"
          >
            <text class="tabs-nav_item--text">{{ v.name }}</text>
          </view>
        </template>
      </view>
    </scroll-view>
    <view class="tabs-content">
      <swiper
        class="tabs-content-swiper"
        :current="currentTab"
        @change="swiperChange"
        :style="{ height: swiperHeight + 'px' }"
      >
        <template v-for="(v, i) in list" :key="`swiperItem${i}`">
          <swiper-item>
            <view class="tabs-content_item">
              <template v-if="v.addressStr || (v.mainBusinessList && v.mainBusinessList.length)">
                <!-- 地址 -->
                <view v-if="v.addressStr" class="address" @click="openLocation(v.addressStr)">
                  <image
                    class="address-icon"
                    src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-9.png"
                    mode="scaleToFill"
                  />
                  <text>{{ parseAddress(v.addressStr)?.address }}</text>
                </view>
                <!-- 行业 -->
                <view v-if="v.mainBusinessList" class="industry-list">
                  <template v-for="(text, index) in v.mainBusinessList" :key="text + index">
                    <view class="industry-tag">{{ text }}</view>
                  </template>
                </view>
                <CuttingLine :margin-top="0" />
              </template>
              <template v-if="v.socialIdentityList?.length">
                <view class="com-title">社会荣誉/职务</view>
                <Honor :icon-type="2" :list="v.socialIdentityList" />
                <CuttingLine :margin-top="0" />
              </template>
              <template v-if="v.imgList?.length || v.video || v.document || v.introduce">
                <view class="com-title">简介</view>
                <!-- 风采 -->
                <template v-if="v.imgList?.length">
                  <ElegantDemeanour v-model="v.imgList" :cardType="ApplyTypeEnum.UNIT" />
                  <CuttingLine background-color="transparent" :margin-bottom="0" />
                </template>
                <!-- 视频 -->
                <template v-if="v.video">
                  <VideoPlay
                    :model-value="{
                      videoUrl: v.video,
                      coverUrl: v.videoCover,
                    }"
                  />
                  <CuttingLine background-color="transparent" :margin-bottom="0" />
                </template>
                <!-- 文档预览 -->
                <template v-if="v.document">
                  <Preview :doc-list="v.document" :file-name="v.documentName" />
                  <CuttingLine background-color="transparent" :margin-bottom="0" />
                </template>
                <!-- 简介 -->
                <template v-if="v.introduce">
                  <Introduction :model-value="v.introduce" />
                  <CuttingLine background-color="transparent" :margin-bottom="0" />
                </template>
              </template>
            </view>
          </swiper-item>
        </template>
      </swiper>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { getCurrentInstance, nextTick, type PropType, ref, watch } from 'vue';
  import Honor from '../honor/index.vue';
  import ElegantDemeanour from '../elegantDemeanour/index.vue';
  import { ApplyTypeEnum } from '@/enums/membershipEnum';
  import VideoPlay from '@/components/VideoPlay/index.vue';
  import Preview from '../uploadDocument/preview.vue';
  import Introduction from '../introduction/index.vue';
  import { useLocation } from '@/hooks/core/useLocation';
  import CuttingLine from '../cuttingLine/index.vue';
  import type { UnitListResult } from '@/api/mine/types';

  const props = defineProps({
    list: Array as PropType<UnitListResult[]>,
  });

  const { parseAddress, openLocation } = useLocation();

  const currentTab = ref(0);
  const tabsNavItemId = ref('tabsNavItem_');
  const scrollIntoView = ref(tabsNavItemId.value + currentTab.value);
  const _this = getCurrentInstance();
  const swiperHeight = ref(0);

  function setScrollIntoView(index: number) {
    scrollIntoView.value = tabsNavItemId.value + (index - 1 > 0 ? index - 1 : 0);
  }

  function switchTab(index: number) {
    currentTab.value = index;
    setScrollIntoView(index);
  }

  function swiperChange(e: { detail: { current: number; currentItemId: string; source: string } }) {
    const { source, current } = e.detail;
    if (source) {
      currentTab.value = current;
      setScrollIntoView(current);
    }
  }

  function getSwiperItemDom() {
    const query = uni.createSelectorQuery().in(_this);
    query
      .selectAll('.tabs-content_item')
      .boundingClientRect((data) => {
        const domList = data as UniApp.NodeInfo[];
        swiperHeight.value = Math.max.apply(
          null,
          domList.map((v) => v.height as number),
        );
        currentTab.value = 0;
        setScrollIntoView(currentTab.value);
      })
      .exec();
  }

  watch(
    () => props.list,
    () =>
      nextTick(function () {
        getSwiperItemDom();
      }),
    { immediate: true },
  );
</script>

<style lang="scss" scoped>
  .firm-preview {
    background-color: #fff;
    .tabs-nav-scroll {
      margin: 0 30rpx;
      width: calc(100% - 60rpx);
    }
    .tabs-nav {
      height: 65rpx;
      display: flex;
      position: relative;
      &_item {
        max-width: 36vw;
        flex-shrink: 0;
        line-height: 65rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 20rpx;
        white-space: nowrap;
        color: #333;
        font-size: 27rpx;
        border-radius: 10rpx 10rpx 0 0;
        transition: all 0.3s;
      }
      &_item--active {
        font-size: 32rpx;
        font-weight: bolder;
        background-color: #e9e3b5;
      }
    }
    .tabs-content {
      background-color: #e9e3b5;
      border-radius: 20rpx;
      padding: 12rpx;
      &-swiper {
        background-color: #fff;
        border-radius: 20rpx;
        padding-top: 38rpx;
        height: 0;
        transition: height 0.3s;
      }
      &_item {
        padding: 0 18rpx;
        .address {
          color: #333;
          font-size: 27rpx;
          display: flex;
          margin-bottom: 30rpx;
          padding-right: 90rpx;
          &-icon {
            width: 35rpx;
            height: 35rpx;
            flex-shrink: 0;
            margin-right: 10rpx;
          }
        }
        .industry-list {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .industry-tag {
            color: #333;
            font-size: 27rpx;
            padding: 10rpx 15rpx;
            background: linear-gradient(180deg, #fff4dc 0%, #fffaf2 100%);
            border-radius: 10rpx;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
          }
        }
        .com-title {
          margin: 20rpx 0;
          font-size: 27rpx;
          color: #333;
          font-weight: bolder;
        }
      }
    }
  }
</style>
